<template>
  <div id="wf">
    <div v-for="item in items" class="photo-container">
        <div class="img-box">
            <img v-lazy="item.src">
        </div>
        <div class="subinfo-box">
            <span>大赞门城</span>、
            <span><i>11</i>点赞</span>
        </div>
    </div>
  </div>
</template>

<script type="text/javascript">

/**
 * init
 */
var $items, itemWidth, time;
// 监听resize 重新进行分列
window.addEventListener('resize', function(){
    clearTimeout(time);
    time = setTimeout(function(){
     wf.arrange();
    }, 500);
});

/**
 * 时间大小的设置决定是先加载img还是arrange布局
 */
setTimeout(function(){
  // 选取了所有的 div容器
  $items = document.querySelectorAll('#wf .photo-container');
  // 获取第一个容器的宽
  itemWidth = $items[0].offsetWidth;
  // 
  console.log(itemWidth);
  // 进行排列
  wf.arrange();
}, 10000);

// 布局方法  


/**
 * 随机高度，随机图片，布局函数
 */
var wf = {
  // 返回随机高宽的图片
  rdmImg: function(){
    var width = Math.floor(Math.random() * 100) + 300,
        height = Math.floor(Math.random() * 500) + 300;
    return "http://placekitten.com/" + height + '/' + width;
  },
  // 返回一个随机高度
  rdmHeight: function(){
    return Math.round(Math.random() * 200) + itemWidth;
  },
  // 进行排列
  arrange: function(){
    // 选取了所有的 div容器
    $items = document.querySelectorAll('#wf .photo-container');
    // 获取第一个容器的宽
    itemWidth = $items[0].offsetWidth;

      debugger;
    // 获取视窗的宽
    var viewWidth = document.documentElement.clientWidth || document.body.clientWidth,
        // 计算出列
        // cols = Math.floor( viewWidth / itemWidth );
        cols = 2;

    // 存放每列当前长度的数组并初始化   // 如果两列 返回[0,0]
    var colsHeight = [];
    for(var i = 0; i< cols; i++){
        colsHeight.push(0);
     }

    // 遍历每一项item
    $items.forEach( function(ele, idx) {
    // 获取当前高度和当前列
    var curHeight = colsHeight[0], 
        col = 0;
    /*
        如果高度小于当前高度  那么当前高度就等于这个小的高度  并且当前列为高度较小的列 
        将当前div进行定位  top等于当前高度  left等于列*列数   
        当前列的高度为最后这个元素的高度
    
    */
         
    for(var i = 0; i< colsHeight.length; i++){
        if(colsHeight[i] < curHeight){
            curHeight = colsHeight[i];
            col = i;
        }
    }
    ele.style.left = col * itemWidth + 'px';
    ele.style.top = curHeight + 'px';
    // ele.style.height = '200px';
    
    //console.log(ele.querySelector('img').src); // http://localhost:8080/
    debugger;
    colsHeight[col] += ele.offsetHeight;
    });
  },
}

/**
 * export数据层
 */
var items = (function(){
       var arr = new Array();
        for(var i= 0; i< 20; i++){
            var img = {};
            img.src = wf.rdmImg();
            arr.push(img);
        }
        return arr;
  })();

// 获取图片
function getImgs() {
    var arr = new Array();
        for(var i= 0; i< 2; i++){
            var img = {};
            img.src = wf.rdmImg();
            arr.push(img);
        }
    return arr;
}

export default{
    data () {
      return {
        items: [],
        imgLength: 0
      }
    },

    created () {
        this.init();
    },
    methods: {
        init() {
            this.getList();
            this.$util.moreAndMoreOnscroll(this.getList, 'MoreAndMore')
        },
        getList() {
            var arr = getImgs();
            console.log(arr);
            this.items = this.items.concat(arr);
        },
        arrange() {

        },
        isLoaded(item) {
            let _this = this;
            let img = new Image();
            img.src = item.src;
            img.onload = () => {
                console.log(event.target)
                item.realsrc = item.src;
                _this.imgLength +=1;
                console.log(_this.imgLength)
              
		    }
        }      
    }
}

</script>


<style lang="less" scoped>
@width: 50%;
@padding: 10px;

#wf{
  position: relative;
  margin: 0 auto;
  .photo-container{
    width: @width;
    position: absolute;
    top: 0;
    left: 0;
    padding: @padding;
    border: solid 1px grey;
    // .transition(left 1s);
    img{
      width: 100%;
      position: relative;
    }
  }
}

.transition(@transition){
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -o-transition: @transition;
  transition: @transition;
}
</style>